<template>
  <div class="form-slide">
      <div v-for="color in colors" :key="color.key" class="form-color-item">
        <ColorPicker @change="handlerChange" v-model="color.value"></ColorPicker>
      </div>
  </div>
</template>
<script>
import { Vue, Component, Prop, Model, Watch} from 'vue-property-decorator'

@Component
export default class FormColors extends Vue {
  @Prop(Number) max:number
  @Prop(Number) min:number
  @Model('change', { type: Array }) value:any
  colors=[]

  @Watch('value')
  onValueChange () {
    this.colors = []
    for (let i in this.value) {
      this.colors.push({
        value: this.value[i],
        key: i
      })
    }
  }
  mounted () {
    this.onValueChange()
  }
  handlerChange () {
    this.$emit('change', this.colors.map(item => item.value))
  }
}
</script>
<style lang="less" scoped>
.form-color-item{
  display: inline-block;
  margin-right: 10px;
}
</style>
